<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>全选取消全选案例</title>
    <!--    引入本地js文件使用-->
    <script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script>
    <script type="text/javascript">
        $(function() {
            //绑定全选, 取消全选按钮的单击事件
            $("#check").click(function(){
                //获取id叫做check的checked属性
                var temp = $("#check").prop("checked");
                //通过class属性绑定所有复选框, 并赋值checked属性
                $(".sel").prop("checked", temp);
            });
        });
    </script>
</head>
<body>

<table width="800" border="1">
    <tr>
        <td>
            <input type="checkbox" id="check">全选/取消全选
        </td>
        <td>id</td>
        <td>姓名</td>
        <td>年龄</td>
        <td>性别</td>
        <td>操作</td>
    </tr>
    <tr>
        <td><input type="checkbox" class="sel"></td>
        <td>1</td>
        <td>青龙</td>
        <td>18</td>
        <td>男</td>
        <td>
            <input type="button" value="修改"> &nbsp;&nbsp;
            <input type="button" value="删除">
        </td>
    </tr>
    <tr>
        <td><input type="checkbox" class="sel"></td>
        <td>2</td>
        <td>梼杌</td>
        <td>18</td>
        <td>男</td>
        <td>
            <input type="button" value="修改"> &nbsp;&nbsp;
            <input type="button" value="删除">
        </td>
    </tr>
    <tr>
        <td><input type="checkbox" class="sel"></td>
        <td>3</td>
        <td>白虎</td>
        <td>18</td>
        <td>女</td>
        <td>
            <input type="button" value="修改"> &nbsp;&nbsp;
            <input type="button" value="删除">
        </td>
    </tr>
    <tr>
        <td><input type="checkbox" class="sel"></td>
        <td>4</td>
        <td>朱雀</td>
        <td>18</td>
        <td>女</td>
        <td>
            <input type="button" value="修改"> &nbsp;&nbsp;
            <input type="button" value="删除">
        </td>
    </tr>
    <tr>
        <td><input type="checkbox" class="sel"></td>
        <td>5</td>
        <td>玄武</td>
        <td>18</td>
        <td>男</td>
        <td>
            <input type="button" value="修改"> &nbsp;&nbsp;
            <input type="button" value="删除">
        </td>
    </tr>
    <tr>
        <td><input type="checkbox" class="sel"></td>
        <td>6</td>
        <td>饕鬄</td>
        <td>18</td>
        <td>男</td>
        <td>
            <input type="button" value="修改"> &nbsp;&nbsp;
            <input type="button" value="删除">
        </td>
    </tr>
</table>
</body>
</html>